import React, { useContext, useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { useTranslation, getI18n } from 'react-i18next';
import { useHistory } from 'react-router-dom';

import style from './index.module.scss'
import WhiteHeightSpace from '@/components/WhiteSpace/WhiteHeightSpace';
import Images from '@/image'
import { ActiveNodeTypeEnum, NftJoinAndActiveEnum } from '@/enum';
import { formatNumber } from '@/utils/utils';
import { bigDivGetInteger, isGt, isGtEqualTo, isLessEqualTo } from '@/utils/bigNumber';
import RouterConfig from '@/object/RouterConfig';

interface IProps {
    type: string
    isMobile: boolean
    account: undefined | null | string
    language: string
    nodeStatus: string,
    callbackUpdateStatus?: Function
}

const ActiveNode = (props: IProps) => {
    const { t } = useTranslation();
    const { isMobile, type, account, language, nodeStatus ,callbackUpdateStatus } = props
    const { push, location: { pathname }, goBack } = useHistory()
    const [redInput, setRedInput] = useState<number | string>(0)

    useEffect(() => {
        if (nodeStatus === NftJoinAndActiveEnum.ACTIVE_CODE_STATUS) {
            setTimeout(() => {
               
            }, 10000)
        }
    }, [nodeStatus])
 
    //区分没有数据展示情况 
    const noNftTip = useMemo(() => {
        let resultDom = <></>
        //走我的节点页面进入
        const myNodeDom = <div className={style.noDataTextLine}>
            <span className={style.noShiftNftLabel}> {t("You do not own any nodes, please join the nodes first and then try again!")}</span>
            {/* <span className={style.goNoShiftNftLabel} onClick={() => {
                //去买NFT 
                push(RouterConfig.joinAndActive)
            }}>{t("purchase NFT")} </span>
            <img src={Images.subMenuMoreAlready} className={style.subMenuMoreIcon} /> */}
        </div>
        // 走公共部分
        const publicNodeDom = <div className={style.noDataTextLine}>
            <span className={style.noShiftNftLabel}> {t("You do not own any nodes, please join the nodes first and then try again!")}</span>
        </div>
        resultDom = type === ActiveNodeTypeEnum.COMMON_NODE_ACTIVE_CODE ? publicNodeDom : myNodeDom
        return resultDom
    }, [account, language, type])
    //console.log("checkedItemArr.length === waitPledgeInfo.nodeList.length ",checkedItemArr.length,waitPledgeInfo.nodeList.length )
    return (
        <div className={style.container}>
            <div className={style.selectActiveLabel}>{t("Select to activate the NFT node")}</div>
            {
                isMobile && <div className={style.linePx}></div>
            }
            <div className={style.listScroll} >
                {/* 无可兑换的NFT，去购买NFT > */}
                {
                    noNftTip
                }
                

            </div>
            {
                isMobile && <div className={style.linePx}></div>
            }
            {/* <WhiteHeightSpace height={'30px'} /> */}
            <div className={style.labelLine}>
                <div className={style.tokinCoinLabel}>{t("staking {{X}}", { X: 'YOHO' })}</div>
                <div className={style.tokinCoinVal}>
                    {t("Balance")}：{ '0'} {'YOHO'}
                </div>
            </div>
            <div className={style.inputRelative}>
                <input
                    placeholder={t(" minimum staking amount XXX  ", { XXX: 0 })}
                    type={'number'}
                    className={style.inputNumber}
                    value={''}
                    onChange={(e) => {
                       
                    }}
                />
                <span className={style.inputIconAdd}
                    onClick={() => {
                        
                    }}
                > {t("minimum")} </span>
            </div>
            {/* <WhiteHeightSpace height={isMobile ? '30px' : '40px'} /> */}
            {
                 <div style={{
                    color: '#FF5151',
                    fontSize: isMobile ? "12px" : "14px",
                    height: isMobile ? '30px' : '40px'
                }}>{'YOHO'}{t("toastBalance")}</div> 
            }
            {/* 可以点击的样式名为 confirmAndActiveButton 不能点击 confirmAndActiveButtonDisable */}
            <div className={style.confirmAndActiveButton} onClick={() => {
                // if (isGtEqualTo(inputPledgeNumber, waitPledgeInfo.minPledgeAmount) && checkedItemArr.length > 0) {
                //     pledgeConfirm(
                //         Number(inputPledgeNumber), 
                //         checkedItemArr,
                //         callbackUpdateStatus
                //     )
                // }
            }}>
                {t("Confirm staking and activate")}
            </div>
            <WhiteHeightSpace height={isMobile ? '20px' : '30px'} />
        </div>
    )
}
export default ActiveNode